/**
 * 分销商管理编辑
 *
 * @author xxf
 * @date 2018/2/7
 * */
import React, {PureComponent} from 'react';
import {connect} from 'dva';
import {
  Form, Input,  Button, Card, Radio,
} from 'antd';
import {routerRedux} from 'dva/router';
import {message} from "antd/lib/index";

const FormItem = Form.Item;
const RadioGroup = Radio.Group;

@connect(state => ({
  submitting: state.distributorManage.submitting,
}))

@Form.create()
export default class DistributorManageShopDetail extends PureComponent{
  state={
    modalVisible:false,
    record:{},
  }

  handleParentModalVisible = (e) => {
    this.props.handleModalVisible();
  }

  handleSubmit=()=>{
    const {dispatch}=this.props
    this.props.form.validateFields((err,values)=>{
      if(!err){
        dispatch({
          type:'distributorManage/updateShopInfo',
          payload:{...values,
            shop_id:this.props.record.shop_id},
          callback:(response)=>{
            if(response.result===0){
              this.props.handleModalVisible(false);
              this.props.dispatch({
                type:'distributorManage/queryAll',
              });
              message.success("操作成功")
            }else{
              this.props.handleModalVisible(true);
              message.error("操作失败")
            }
          }
        })
      }
    })
  }

  checkPhone=(rule,value,callback)=>{
    if (!/^1[34578]\d{9}$/.test(value)){
      callback("电话号码格式不正确");
    }
    callback()
  }

  render() {
    const {submitting,record} = this.props;
    const {getFieldDecorator, getFieldValue} = this.props.form;
    const id=this.props.record.id;

    const formItemLayout = {
      labelCol: {
        xs: {span: 24},
        sm: {span: 7},
      },
      wrapperCol: {
        xs: {span: 24},
        sm: {span: 12},
        md: {span: 10},
      },
    };

    const submitFormLayout = {
      wrapperCol: {
        xs: {span: 24, offset: 0},
        sm: {span: 10, offset: 7},
      },
    };

    return (
      <Card bordered={false}>
        <Form
          onSubmit={this.handleSubmit}
          hideRequiredMark
        >
          <FormItem {...formItemLayout} label="店铺名称">
            {(getFieldDecorator("shop_name", {
              initialValue: record.shop_name,
              rules: [{
                required: true, message: '店铺名称不能为空'
              }],
            }))(<Input placeholder="店铺名称"/>)}

          </FormItem>
          <FormItem {...formItemLayout} label="店铺标题">
            {(getFieldDecorator("shop_title", {
              initialValue: record.shop_title,
              rules: [{
                required: true, message: '店铺标题不能为空'
              }],
            }))(<Input placeholder="店铺标题"/>)}
          </FormItem>
          <FormItem {...formItemLayout} label="店铺地址">
            {(getFieldDecorator("shop_address", {
              initialValue: record.shop_address,
              rules: [{
                required: true, message: '店铺地址不能为空'
              }],
            }))(<Input placeholder="店铺地址"/>)}

          </FormItem>
          <FormItem {...formItemLayout} label="店铺邮箱">
            {(getFieldDecorator("seller_email", {
              initialValue: record.seller_email,
              rules: [{
                required: true, message: '店铺邮箱不能为空'
              }],
            }))(<Input placeholder="店铺邮箱"/>)}

          </FormItem>
          <FormItem {...formItemLayout} label="客服qq">
            {(getFieldDecorator("kf_qq", {
              initialValue: record.kf_qq,
              rules: [{
                required: true, message: '客服qq不能为空'
              }],
            }))(<Input placeholder="客服qq" />)}

          </FormItem>
          <FormItem {...formItemLayout} label="客服旺旺">
            {(getFieldDecorator("kf_ww", {
              initialValue: record.kf_ww,
              rules: [{
                required: true, message: '客服旺旺不能为空'
              }],
            }))(<Input placeholder="客服旺旺" />)}

          </FormItem>
          <FormItem {...formItemLayout} label="客服电话">
            {(getFieldDecorator("kf_tel", {
              initialValue: record.kf_tel,
              rules: [{
                required: true, message: '客服电话不能为空'
              }],
            }))(<Input placeholder='客服电话'/>)}

          </FormItem>
          <FormItem {...formItemLayout} label="店铺电话">
            {(getFieldDecorator("mobile", {
              initialValue: record.mobile,
              rules: [{
                required: true,
                whitespace:true,
                message: '店铺电话不能为空',
              },{
                validator:this.checkPhone
              }],
            }))(<Input placeholder="店铺电话" type={'tel'}/>)}

          </FormItem>
          <FormItem {...formItemLayout} label="公告">
            {(getFieldDecorator("notice", {
              initialValue: record.notice,
            }))(<Input placeholder="公告"/>)}

          </FormItem>
          <FormItem {...formItemLayout} label="状态">
            {(getFieldDecorator("status", {
              initialValue: record.status,
            }))(<Radio.Group>
              <Radio value={true}>开启</Radio>
              <Radio value={false}>关闭</Radio>
            </Radio.Group>)}
          </FormItem>
          <FormItem {...submitFormLayout} style={{marginTop: 32}}>
            <Button loading={submitting}
                    onClick={this.handleSubmit}>
              提交
            </Button>
            <Button style={{marginLeft: 8}} onClick={this.handleParentModalVisible}>取消</Button>
          </FormItem>
        </Form>
      </Card>
    );

  }
}